<template>
	<view class="test">
		<view class="schedule">
			<view class="schedule_text">
				答题进度 <text class="current_test">{{currestQuestion}}</text> /{{list.length}}
			</view>
			<progress :percent="percent" activeColor="#fff" backgroundColor="#89B8FF" stroke-width="6" />
		</view>
		<view class="question_box">
			<block v-for="(item,i) in list" :key="i">
				<view class="question" v-show="i+1===currestQuestion">
					<view class="question_type">
						<view class="">单选题</view>
					</view>
					<view class="question_title">
						{{item.question}}
					</view>
					<view class="options">
						<view :class="[qs.isSelect ? 'activeClass' : 'item', ]" v-for="(qs,idx) in item.qurstionList" :key="idx" @click="onSelect(i,idx)">
							{{qs.name}}
						</view>
					</view>
					<view class="under_line">
						<view class=""></view>
					</view>
				</view>
			</block>
		</view>
		<view class="btn">
			<view class="" @click="next()">{{text}}</view>
		</view>
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="result">
				<image src="../../../static/home/jiangbei.png" mode=""></image>
				<view class="score_tips">本次答题得分</view>
				<view class="score">
					<text class="score_val">{{resDetails.score}}</text>
					<text>分</text>
				</view>
				<view class="reset_btn" @tap="retry()">重新答题</view>
				<view class="exit_btn" @click="onBack()">退出答题</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: 0,
				id: '',
				list: [],
				currestQuestion: 1,
				text: '下一题',
				subValueList: [],
				resDetails: {}, //评测结果
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.pagetype = opt.pagetype
			this.getTestQuestion()
		},
		methods: {
			onBack(){
				this.pagetype === '党建学习结果' || this.pagetype === '心理测试结果' ? this.back(2) : this.back()
			},
			// 重新答题
			retry() {
				setTimeout(() => {
					this.$router.go(0)
				}, 500)
				this.$refs.popup.close()
			},
			async onSubmit() {
				this.list.forEach((item, i) => {
					item.qurstionList.forEach((val, idx) => {
						if (val.isSelect) {
							this.subValueList.push(val.val)
						}
					})
				})

				// console.log(this.list, "list", this.subValueList)
				this.onReq()

			},
			async onReq() {
				const res = await this.$api.post(`paper/paper/calculate`, {
					answers: this.subValueList,
					id: this.id
				});
				// console.log(res, 're提交s--')
				if (res.code == 200) {
					this.resDetails = res.data
					this.showPopup()
					// this.showToast(res.message)
				}
			},
			next() {
				const {
					list,
					currestQuestion,
					text
				} = this
				const calculateList = list[currestQuestion - 1].qurstionList
				const res = calculateList.every(item => {
					return item.isSelect == false
				})
				if (res) {
					this.showToast('请选择答案~')
				} else {
					if (currestQuestion == list.length && text === '提交') {
						this.onSubmit()
					}
				
					if (currestQuestion < list.length) {
						this.currestQuestion += 1
					}
					if (currestQuestion == list.length - 1) {
						this.text = '提交'
					}

				}
				// console.log("res", res)

			},
			showPopup() {
				this.$refs.popup.open()
			},
			onSelect(i, idx) {
				this.percent = this.currestQuestion / this.list.length * 100
				console.log(this.percent, this.currestQuestion / this.list * 100)
				const dataList = this.list.map((item, oneI) => {
					if (i === oneI) {
						return {
							...item,
							qurstionList: item.qurstionList.map((val, twoI) => {
								return {
									...val,
									isSelect: twoI === idx,
								}
							})
						}
					}
					return item;
				});
				this.$set(this, 'list', dataList)
			},
			//获取试题 
			async getTestQuestion() {
				const res = await this.$api.get(`paper/paper/question/list/${this.id}`, {});
				// console.log(res, 'res--')
				if (res.code == 200) {
					this.list = res.data.map((item, i) => {
						let valList = []
						item.options.split(',').forEach((data, idx) => {
							valList.push({
								val: data.slice(0, 1),
								isSelect: false,
								name: data
							})
						})
						return {
							...item,
							qurstionList: valList

						}
					})

					console.log(this.list, "list",)
					if(this.currestQuestion == this.list.length){
						this.text='提交'
					}
				}
			},
		},
		onBackPress(e) {
			if (e.from === 'backbutton') {
				this.onBack()
				return true;
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #2E80FE;
	}

	.test {
		padding: 30rpx 26rpx;
		box-sizing: border-box;

		.schedule {
			margin-bottom: 66rpx;

			.schedule_text {
				font-size: 26rpx;
				color: #CBEAFF;
				margin-bottom: 30rpx;
			}

			.current_test {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFE;
				margin: 0 10rpx;
			}
		}

		.question_box {
			width: 100%;
			background-color: #fff;
			border-radius: 34rpx;
			padding: 24rpx 26rpx 0;
			box-sizing: border-box;
			margin-bottom: 180rpx;

			.question {
				width: 100%;
				border-radius: 34rpx;

				.question_type {
					display: flex;
					align-items: center;

					>view {
						height: 42rpx;
						padding: 0 16rpx;
						background-color: #2E80FE;
						font-size: 22rpx;
						font-weight: bold;
						color: #fff;
						line-height: 42rpx;
						border-radius: 6rpx;
					}
				}

				.question_title {
					font-size: 30rpx;
					font-weight: bold;
					padding: 24rpx 0 66rpx;
				}

				.options {
					.item {
						width: 100%;
						padding: 36rpx;
						box-sizing: border-box;
						background-color: #F9F9F9;
						border-radius: 14rpx;
						font-size: 30rpx;
						margin-bottom: 20rpx;
					}

					.item :not(:last-child) {
						margin-bottom: 48rpx;
					}

					.activeClass {
						width: 100%;
						padding: 36rpx;
						box-sizing: border-box;
						border-radius: 14rpx;
						font-size: 30rpx;
						border: 1px solid #2E80FE;
						color: #2E80FE;
						margin-bottom: 20rpx;
					}
				}

				.under_line {
					width: 100%;
					height: 76rpx;
					position: relative;

					>view {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						border-bottom: 30rpx solid #88B8FF;
						border-radius: 34rpx;
					}
				}
			}
		}

		.btn {
			padding: 0 48rpx 30rpx;
			box-sizing: border-box;

			>view {
				width: 100%;
				height: 94rpx;
				border-radius: 46rpx;
				text-align: center;
				line-height: 94rpx;
				background-color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				color: #2E80FE;
			}
		}

		.result {
			width: 600rpx;
			height: 666rpx;
			background-color: #fff;
			border-radius: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 52rpx;

			image {
				width: 246rpx;
				height: 232rpx;
			}

			.score_tips {
				font-size: 30rpx;
				line-height: 30rpx;
				padding: 32rpx 0;
			}

			.score {
				font-size: 26rpx;
				margin-bottom: 46rpx;

				.score_val {
					font-size: 54rpx;
					font-weight: bold;
					color: #EB1919;
				}
			}

			.reset_btn {
				width: 400rpx;
				height: 66rpx;
				background-color: #2E80FE;
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				line-height: 66rpx;
				border-radius: 12rpx;
				margin-bottom: 48rpx;
			}

			.exit_btn {
				font-size: 30rpx;
				color: #2E80FE;
			}
		}
	}
</style>